<template>
  <nav :class="['sub-menu']">
    <span id="subitem-marker" ref="marker"></span>
    <span
      v-for="item in subList"
      :key="item.id"
      :class="['sub-menu-item', { active: activeIndex === item.id }]"
      @click="changeActive(item.id, $event)"
    >{{item.value}}</span>
  </nav>
</template>

<script>
import { ref, reactive, onMounted } from "vue";
export default {
  props: {},
  setup(props) {
    const marker = ref(null);
    let subList = [
      { id: 0, value: "推荐" },
      { id: 1, value: "主机" },
      { id: 2, value: "笔记本电脑" },
      { id: 3, value: "手机" },
      { id: 4, value: "相机" },
      { id: 5, value: "耳机" },
      { id: 6, value: "硬件" },
      { id: 7, value: "相机" },
      { id: 8, value: "相机" },
    ];
    subList = reactive(subList);
    let activeIndex = ref(0);
    const changeActive = (currentIndex, e) => {
      console.log("marker: ", marker.value);
      marker.value.style.left = e.target.offsetLeft;
      console.log("marker.value.style.left: ", marker.value.style);
      marker.value.style.width = e.target.offsetWidth;
      activeIndex.value = currentIndex;
    };
    let isFixed = false;
    const changeFixed = (e) => {
      console.log(e);
    };
    return {
      marker,
      subList,
      activeIndex,
      changeActive,
      isFixed,
      changeFixed,
    };
  },
};
</script>

<style lang="scss" scoped>
nav.sub-menu {
  position: relative;
  padding: 20px;
  font-size: 14px;
  position: sticky;
  top: -1px;
  border: 1px solid #f3f4f4;

  span {
    color: #6e6d7a;
    margin: 0 16px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;

    &:hover {
      color: #959595;
    }

    &.active {
      display: inline-block;
      color: #333;
      font-weight: bold;
      left: 0;
      background-color: #f5f5f5;
      border-radius: 8px;
      transition: all 0.5s;
    }
  }
}
// #subitem-marker {
//   position: absolute;
//   height: 8px;
//   width: 100%;
//   background-color: #ddd;
//   left: 0;
//   bottom: 20px;
//   transition: 0.5s;
//   border-radius: 16px;
// }
</style>
